import QtQuick 2.7
import QtGraphicalEffects 1.0

Rectangle {
    id:root
    color: "#322d2d"

    border.width: 2
    border.color: "white"
    /*! +32的原因为预留部分空间,看起来美观! !*/
    width: btnLable.width + 32

    signal clicked

    property alias text: btnLable.text
    property alias mouseArea: mouseArea
    property bool clickSta:false

    property bool down: false
    property bool isClicked: false
    property bool isHovered: false


    MouseArea {
        id: mouseArea
        anchors.fill: parent

        hoverEnabled:true
        onClicked: {
            emit:root.clicked();
        }
        onEntered: {
            root.state = "hovered"
        }
        onExited: {
            if(root.state != "clicked")
                root.state = "normal"
        }
        onPressed: {
            root.state = "pressed"
        }
        onReleased: {
            root.state = "normal"
        }
    }

    Text {
        id: btnLable
        anchors.centerIn: parent
        font.bold: true
        font.pixelSize: 24
    }
    state: "normal"
    /* ! 描述了按钮的状态 ! */
    states: [
            State {
                name: "normal"
                PropertyChanges {
                    target: root
                    color:"#322d2d"
                }
                PropertyChanges {
                    target: root
                    border.color:"white"
                }
                PropertyChanges {
                    target: btnLable
                    color:"white"
                }
            },
            State {
                name: "pressed"
                PropertyChanges {
                    target: root
                    color:"white"
                }
                PropertyChanges {
                    target: root
                    border.color:"#322d2d"
                }
                PropertyChanges {
                    target: btnLable
                    color:"#322d2d"
                }
            },
            State {
                name: "hovered"
                PropertyChanges {
                    target: root
                    color: "#1f1f1f"
                }
                PropertyChanges {
                    target: btnLable
                    color:"white"
                }
            },
            State {
                name: "clicked"
                PropertyChanges {
                    target: root
                    isClicked:true
                }
            }
     ]


}
